<template>
  <el-dialog title="操作" :close-on-click-modal="false" width="600px" :visible.sync="visible">
    <el-row :gutter="24">
      <template v-for="(item ,index) in profList">
        <el-col :span="8">
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <span>{{ (index+1)+'.'+item.name }}</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handelClick(item)">确定</el-button>
            </div>
            <div class="text item">
              <p>{{ item.description }}</p>
              <p>版本:v{{ item.version }}</p>
            </div>
          </el-card>
        </el-col>
      </template>
    </el-row>
  </el-dialog>
</template>
<script>
import { getProfAllLatest, routerMap } from '@/api/activiti'
export default {
  name: 'ActBusinessModal',
  components: {},
  props: {},
  data() {
    return {
      visible: false,
      profList: []
    }
  },
  watch: {
    /*
          'selectedRows': function (selectedRows) {
            this.needTotalList = this.needTotalList.map(item => {
              return {
                ...item,
                total: selectedRows.reduce( (sum, val) => {
                  return sum + val[item.dataIndex]
                }, 0)
              }
            })
          }
          */
  },
  beforeCreate() { },
  created() {
    getProfAllLatest().then(res => {
      this.profList = res.rows.map(r => {
        return r
      })
    })
  },
  methods: {
    add() {
      this.visible = true
    },
    handelClick(prof) {
      const router = routerMap[prof.key]
      if (router) {
        this.visible = false
        this.$router.push({ name: router, query: { key: prof.key, procDefId: prof.id, procName: prof.name }})
      } else {
        this.$message.error('路由配置错误')
      }
    }
  }
}
</script>
